<template>
	<a-spin dot :loading="loading">
		<a-watermark class="watermark" content="趣貓坞" grayscale>
			<view class="top-menu">
				<a-menu mode="horizontal" :selected-keys="active" @menu-item-click="menuClick">
					<a-menu-item icon="" key="0">
						任务大厅
					</a-menu-item>
					<a-menu-item icon="icon-user" key="1">
						进行中
					</a-menu-item>
					<a-menu-item icon="icon-user" key="2">
						已完成
					</a-menu-item>
				</a-menu>
			</view>
			<view class="task-list">
				<view v-if="dataLoading" style="display: flex;justify-content: center;margin-bottom: 10px;">
					<view class="loader"></view>
				</view>
				<block v-if="active == '0'">
					<TaskItem v-for="task in taskList" :key="task.id" :info="task" />
				</block>
				<block v-if="active == '1'">
					<JoinItem v-for="join in joinList" :key="join.id" :info="join" />
				</block>
			</view>
		</a-watermark>
	</a-spin>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import TaskItem from '@/components/TaskItem.vue';
	import JoinItem from '@/components/JoinItem.vue';
	import TaskApi from '@/Api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const taskList = ref([]);
	const joinList = ref([])
	const active = ref('')
	const selectedKeys = ref([])
	const loading = ref(true);
	const dataLoading = ref(false)
	
	onLoad(options => {
		setTimeout(() => {
			menuClick(options.active || '0')
			loading.value = false
		}, 300)
	})

	const menuClick = (e) => {
		if (e == active.value) {
			console.log('重复点击')
			return
		}
		active.value = e
		selectedKeys.value = [e]
		if (e == '1') {
			MineJoinList()
			return
		}
		List()
	}

	const MineJoinList = () => {
		dataLoading.value = true
		setTimeout(()=>{
			TaskApi.GetMineJoinList().then(res => {
				joinList.value = res.data || []
				dataLoading.value = false
			})
		},800)
		
	}

	const List = () => {
		dataLoading.value = true
		setTimeout(()=>{
			TaskApi.GetTaskList().then(res => {
				taskList.value = res.data || []
				dataLoading.value = false
			})
		},800)
	}
</script>

<style scoped lang="scss">
	.top-menu {
		text-align: center;
		display: flex;
		justify-content: center;
		position: fixed;
		width: 100vw;
		top: 0;
		z-index: 6;
	}



	.task-list {
		padding: 72px 20px 12px;

		.loader {
		  width: 32px;
		  height: 32px;
		  position: relative;
		  animation: rotate 1.5s ease-in infinite alternate;
		}
		.loader::before {
		  content: '';
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  color: #165DFF;
		  background: currentColor;
		  width: 32px;
		  height: 16px;
		  border-radius: 0 0 50px 50px;
		}
		.loader::after {
		  content: '';
		  position: absolute;
		  left: 50%;
		  top: 10%;
		  background: #FFF;
		  width: 4px;
		  height: 32px;
		  animation: rotate 1.2s linear infinite alternate-reverse;
		}
		
		@keyframes rotate {
		  100% { transform: rotate(360deg)}
		}
		      
	}
	
	::v-deep .arco-menu-overflow-wrap{
		display: flex !important;
		justify-content: center !important;
	}
</style>